<template>
  <div class="clearfix">
    <header :style="{ backgroundColor: activeColor }">
      <div class="search">
        <span>搜索商品名称</span>
        <!-- // 待调整 -->
        <i class="iSearch">iconsearch</i>
      </div>
      <!-- // 待调整 -->
      <i class="iMsg">iconmsg</i>
    </header>
    <section class="navTop" :style="{ backgroundColor: activeColor }">
      <swiper slidesPerView="auto" :spaceBetween="15">
        <swiper-slide
          v-for="(item, index) in classifyArr"
          :key="index"
          @click="changeView(index)"
        >
          <span
            :class="{ navTopIsActive: activeIconIndex == index ? true : false }"
            >{{ item }}</span
          >
        </swiper-slide>
      </swiper>
      <p>
        <i>icon</i>
        <span>分类</span>
      </p>
    </section>
    <section class="rotating">
      <div class="rotatingBg" :style="{ backgroundColor: activeColor }"></div>
      <swiper
        class="rotatingImgs"
        :pagination="true"
        :autoplay="{
          delay: 2500,
          disableOnInteraction: false,
        }"
        @slideChange="changeBg"
      >
        <swiper-slide v-for="(item, index) in imgUrlArr" :key="index">
          <img :src="item.img" />
        </swiper-slide>
      </swiper>
    </section>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.less";
import "swiper/components/pagination/pagination.min.css";
import "swiper/components/navigation/navigation.min.css";
import SwiperCore, { Autoplay, Pagination, Navigation } from "swiper/core";
SwiperCore.use([Autoplay, Pagination, Navigation]);

import store from "../../store/index.js";
import router from "../../router/index.js";

import { ref, computed, watch } from "vue";

export default {
  setup() {
    const classifyArr = [
      "首页",
      "家用电器",
      "男装女装",
      "鞋靴箱包",
      "手机数码",
      "电脑办公",
      "家居家纺",
      "个人化妆",
    ];

    const imgUrlArr = computed(() => {
      if (store.getters.haveViewData === true) {
        const list = store.getters.findViewData("slide")[0].data.list;
        return list;
      }
      return [];
    });

    let activeColor = ref(undefined);
    watch(imgUrlArr, (newValue) => {
      if (newValue.length) {
        activeColor.value = imgUrlArr.value[0].bgColor;
      }
    });
    const changeBg = function (swiper) {
      const list = store.getters.findViewData("slide")[0].data.list;
      activeColor.value = list[swiper.activeIndex].bgColor;
    };

    const activeIconIndex = ref(0);
    const changeView = function (index) {
      activeIconIndex.value = index;
      router.push('/user')
    };

    return {
      classifyArr,
      imgUrlArr,
      changeBg,
      activeColor,
      changeView,
      activeIconIndex,
    };
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
header {
  padding: 1rem;
  display: flex;
  align-items: center;
  height: 30px;
  .search {
    font-size: 1rem;
    padding: 0 1rem 0 2rem;
    margin: 0 0.6rem 0 0;
    border-radius: 1.43rem;
    color: #999;
    height: 100%;
    background-color: white;
    flex: 1 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .iSearch {
      flex: 0 0;
    }
  }
  .iMsg {
    flex: 0 0 2rem;
  }
}
.navTop {
  box-sizing: border-box;
  height: 3.6rem;
  line-height: 3.6rem;
  font-size: 1.4rem;
  color: #fff;
  // 待调整
  // background-color: rgb(228, 49, 36);
  padding: 0 1rem 0.5rem;
  display: flex;
  align-items: center;

  .swiper-slide {
    padding: 0;
    margin: 0;
    width: auto;
    // 待调整
    .navTopIsActive::after {
      content: " ";
      position: absolute;
      width: 12px;
      height: 6px;
      border-radius: 0 0 50% 50%/0 0 100% 100%;
      bottom: 0;
      left: calc(50% - 6px);
      border: 2px solid white;
      border-top: none;
      box-sizing: border-box;
    }
  }

  p {
    box-shadow: -6px 0 4px -4px rgb(0 0 0 / 40%);
    height: 2.5rem;
    line-height: 2.5rem;
    width: 8rem;
    box-sizing: border-box;
  }
}
.rotating {
  position: relative;
  .rotatingBg {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 6.4rem;
    border-radius: 0 0 30% 30%;
  }
  .rotatingImgs {
    box-sizing: border-box;
    overflow: hidden;
    width: calc(100% - 2rem);
    border-radius: 1rem;
    background-color: transparent;
    margin: 0 1rem;
    /deep/ .swiper-slide {
      width: 100%;
      img {
        width: 100%;
      }
    }
    /deep/ .swiper-pagination {
      left: 1.5rem;
      right: 1.5rem;
      bottom: 1rem;
      width: calc(100% - 3rem);
      text-align: left;
      .swiper-pagination-bullet {
        box-sizing: border-box;
        margin: 0 3px;
        width: 6px;
        height: 6px;
        background: rgba(0, 0, 0, 0.2);
        opacity: 1;
      }
      .swiper-pagination-bullet-active {
        background: rgba(0, 0, 0, 0.5);
      }
    }
  }
}
</style>